<!DOCTYPE html PUBLIC>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>后台管理中心</title>
    <link rel="stylesheet" href="/admin/css/pintuer.css"/>
    <link rel="stylesheet" href="/admin/css/admin.css"/>
    <link href="/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="/admin/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/pintuer.js"></script>
    <script src="/public/js/vue.js"></script>
    <script src="/public/js/axios.js"></script>
    <script src="/public/js/axios-config.js"></script>
</head>
<body>
<div id="app">
    <!-- 查询并选中影片的模态框 Modal -->
    <div class="modal modal-lg fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">选择影片</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="search">
                        <li>
                            <input class="input" type="text" placeholder="输入影片名称" v-model="keyword" @keyup.enter="searchFilm">
                        </li>
                        <li>
                            <button class="button border-blue" @click="searchFilm">搜索</button>
                        </li>
                    </ul>
                    <table class="table table-striped table-hover">
                        <thead>
                        <th>电影名称</th>
                        <th>电影封面</th>
                        <th>操作</th>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- // Modal-->
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 榜单管理</strong></div>
        <div class="padding border-bottom">
            <ul class="search">
                <li>
                    <a class="button border-green" href="/admin/rankingList/updateoradd.html">
                        <span class="icon-edit"></span> 添加</a>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <thead>
            <tr>
                <th>编号</th>
                <th>年度</th>
                <th>电影类别</th>
                <th>电影列表</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!--在这里遍历列表显示记录-->
            <tr v-for="item in list">
                <td>{{ item.id }}</td>
                <td>{{item.year}}</td>
                <td>{{item.categoryName}}</td>
                <td>{{item.filmIdList}}</td>
                <td>
                    <h5>
                    <span v-for="(film,i) in item.filmList" class="badge bg-green" style ="margin:2px 2px">
                        {{film.name}}
                    </span></h5>
                </td>
                <td>
                    <a class="btn btn-sm btn-warning" :href="'updateoradd.html?id=' + item.id">修改</a>
                    <button class="btn btn-sm btn-danger" @click="del(item.id)">删除</button>
                </td>
            </tr>
            <tr>
                <td colspan="3" align="center">
                    <nav aria-label="Page navigation ">
                        <ul class="pagination">
                            <li class="page-item" v-if="page.hasPreviousPage">
                                <a class="page-link" href="#" @click="goto(page.prePage)">上一页</a>
                            </li>
                            <li :class="'page-item ' + (page.pageNum===item?'active':'')"
                                v-for="item in page.navigatepageNums">
                                <a class="page-link"  href="#" @click="goto(item)">{{ item }}</a>
                            </li>
                            <li class="page-item" v-if="page.hasNextPage">
                                <a class="page-link" href="#" @click="goto(page.nextPage)">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </td>
            </tr>
            </tbody>

        </table>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app', // 注意：Vue 2 中 el 不需要加单引号，虽然加了不报错，但规范写法是不加
        data: {
            list: [],
            page: {},
            keyword: '', // 1. 新增：声明搜索用的 keyword 变量
            params: {
                pageNum: 1,
                pageSize: 5,
                categoryName: null,
                year: null,
                keyword: null // 可选：如果后端需要用 keyword 作为搜索参数，可在 params 中添加
            }
        },
        methods: {
            del(id) {
                let url = '/api/v1/rankingList/remove/' + id
                axios.post(url)
                    .then(res => {
                        alert(res.message)
                        this.loadData()
                    })
                    // 建议添加错误捕获，避免请求失败时卡死
                    .catch(err => {
                        console.error('删除失败：', err)
                        alert('删除失败，请重试')
                    })
            },
            goto(pn) {
                // 2. 修复：分页参数要修改 params.pageNum（和 loadData 中的请求参数对应）
                this.params.pageNum = pn
                this.loadData()
            },
            loadData() {
                let url = '/api/v1/rankingList/page'
                axios.post(url, this.params)
                    .then(res => {
                        // 注意：这里要确认后端返回的结构是否是 res.data（避免因接口返回格式错误导致的问题）
                        this.page = res.data
                        this.list = res.data.list
                    })
                    .catch(err => {
                        console.error('加载数据失败：', err)
                    })
            },
            // 3. 新增：搜索方法 searchFilm
            searchFilm() {
                // 逻辑1：将 keyword 赋值给 params（如果后端需要通过 params 接收搜索参数）
                this.params.keyword = this.keyword.trim() // 去除空格，避免空搜索
                // 逻辑2：重置到第1页（搜索后默认显示第一页结果）
                this.params.pageNum = 1
                // 逻辑3：调用加载数据的方法，发起搜索请求
                this.loadData()

                // （可选）如果搜索接口和分页接口不同，可单独写请求：
                // let searchUrl = '/api/v1/film/search'
                // axios.post(searchUrl, { keyword: this.keyword })
                //     .then(res => {
                //         // 处理搜索结果（比如更新表格数据）
                //         this.list = res.data.list
                //     })
            }
        },
        mounted() {
            this.loadData()
        }
    })


</script>
</body>
</html>